<template>
  <div class="mt-50px w-500px">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="修改密码" name="first"><EditPassword /></el-tab-pane>
      <el-tab-pane label="修改用户名和头像" name="second"><EditUser /></el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import EditPassword from "./components/EditPassword.vue";
import EditUser from "./components/EditUser.vue";

const activeName = ref("first");
</script>

<style scoped>
::v-deep .el-tabs__item {
  font-size: 18px;
}
::v-deep .el-tabs__item.is-active {
  color: #bb0615;
}
::v-deep .el-tabs__active-bar {
  background-color: #bb0615;
}
</style>
